<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Crie Seu Projeto - Zend Framework Manual</title>

    <link href="../css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../css/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <link href="../css/styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Zend Framework</h1>
<h2>Programmer's Reference Guide</h2>
<ul>
    <li><a href="../en/learning.quickstart.create-project.html">Inglês (English)</a></li>
    <li><a href="../pt-br/learning.quickstart.create-project.html">Português Brasileiro (Brazilian Portuguese)</a></li>
</ul>
<table width="100%">
    <tr valign="top">
        <td width="85%">
            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="learning.quickstart.intro.html">Introdu&ccedil;&atilde;o ao Zend Framework e ao MVC</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="learning.quickstart.html">Guia R&aacute;pido do Zend Framework</a></span><br />
                        <span class="home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="learning.quickstart.create-layout.html">Create A Layout</a></div>
                    </td>
                </tr>
            </table>
<hr />
<div id="learning.quickstart.create-project" class="section"><div class="info"><h1 class="title">Crie Seu Projeto</h1></div>
    

    <p class="para">
        Para criar seu projeto, você primeiro deve baixar e extrair o Zend Framework.
    </p>

    <div class="section" id="learning.quickstart.create-project.install-zf"><div class="info"><h1 class="title">Instale o Zend Framework</h1></div>
        

        <p class="para">
            A maneira mais fácil de obter o Zend Framework junto com uma pilha
            <acronym class="acronym">PHP</acronym> completa é através da instalação do <a href="http://www.zend.com/en/products/server-ce/downloads" class="link external">&raquo; Zend Server</a>. O
            Zend Server tem instaladores nativos para Mac OSX, Windows, Fedora Core e Ubuntu, bem
            como um pacote de instalação universal compatível com a maioria das distribuições Linux.
        </p>

        <p class="para">
            Depois que você tiver instalado o Zend Server, os arquivos Framework podem ser
            encontrados em <var class="filename">/usr/local/zend/share/ZendFramework</var> no Mac OSX e
            Linux, e em <var class="filename">C:\Program Files\Zend\ZendServer\share\ZendFramework</var> no
            Windows. O <b><tt>include_path</tt></b> já estará configurado para incluir o Zend
            Framework.
        </p>

        <p class="para">
            Alternadamente, você pode fazer o <a href="http://framework.zend.com/download/latest" class="link external">&raquo; Download da última versão do Zend
                Framework</a> e extrair os conteúdos; faça nota de onde você fez isso.
        </p>

        <p class="para">
            Opcionalmente, você pode adicionar o caminho do arquivo para o subdiretório
            <var class="filename">library/</var> para a configuração <b><tt>include_path</tt></b> do
            seu <var class="filename">php.ini</var>.
        </p>

        <p class="para">
            É isso! O Zend Framework agora está instalado e pronto para uso.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.create-project"><div class="info"><h1 class="title">Crie seu Projeto</h1></div>
        

        <blockquote class="note"><p><b class="note">Note</b>: <span class="info"><b>Ferramenta de Linha de Comando zf</b><br /></span>
            

            <p class="para">
                Na instalação do Zend Framework tem um subdiretório <var class="filename">bin/</var>,
                contendo os scripts <var class="filename">zf.sh</var> e <var class="filename">zf.bat</var> para
                usuários baseados em Unix e Windows, respectivamente. Faça nota do caminho absoluto
                para este script.
            </p>

            <p class="para">
                Onde quer que você veja referências para o comando <strong class="command">zf</strong>, por favor
                substitua o caminho absoluto ao script. Nos sistemas baseados em Unix, você pode
                querer usar a funcionalidade de apelido do shell: <strong class="command">alias
                    zf.sh=path/to/ZendFramework/bin/zf.sh</strong>.
            </p>

            <p class="para">
                Se você tiver problemas em configurar a ferramenta de linha de comando
                <strong class="command">zf</strong>, por favor dirija-se
                <a href="zend.tool.framework.clitool.html" class="link"> ao manual</a>.
            </p>
        </p></blockquote>

        <p class="para">
            Abra o terminal (no Windows, <strong class="command">Iniciar -&gt; Executar</strong>, e então use
            <strong class="command">cmd</strong>). Vá até o diretório onde você gostaria de iniciar um projeto.
            Depois, use o caminho para o script apropriado, e execute um dos seguintes:
        </p>

        <pre class="programlisting brush: shell">
% zf create project quickstart
</pre>


        <p class="para">
            Executando este comando, será criada a estrutura básica do seu site, incluindo seus
            controladores e visualizações iniciais. A árvore parece com o seguinte:
        </p>

        <pre class="programlisting brush: text">
quickstart
|-- application
|   |-- Bootstrap.php
|   |-- configs
|   |   `-- application.ini
|   |-- controllers
|   |   |-- ErrorController.php
|   |   `-- IndexController.php
|   |-- models
|   `-- views
|       |-- helpers
|       `-- scripts
|           |-- error
|           |   `-- error.phtml
|           `-- index
|               `-- index.phtml
|-- library
|-- public
|   |-- .htaccess
|   `-- index.php
`-- tests
    |-- application
    |   `-- bootstrap.php
    |-- library
    |   `-- bootstrap.php
    `-- phpunit.xml
</pre>


        <p class="para">
            Até este ponto, se você não adicionou o Zend Framework para o seu
            <b><tt>include_path</tt></b>, nós recomendamos também copiar ou criar um link
            simbólico em seu diretório <var class="filename">library/</var>. Em qualquer caso, você vai
            querer copiar recursivamente ou simbolizar o diretório
            <var class="filename">library/Zend/</var> da sua instalação Zend Framework no diretório
            <var class="filename">library/</var> do seu projeto. Nos sistemas baseados em Unix, que
            pareceriam como um dos seguintes:
        </p>

        <pre class="programlisting brush: shell">
# Symlink:
% cd library; ln -s path/to/ZendFramework/library/Zend .

# Copy:
% cd library; cp -r path/to/ZendFramework/library/Zend .
</pre>


        <p class="para">
            Nos sistemas Windows, pode ser mais fácil fazer isso do Explorer.
        </p>

        <p class="para">
            Agora que o projeto está criado, os artefatos principais para iniciar o entendimento
            são a inicialização da aplicação, configuração, controladores de ação e vizualizações.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.bootstrap"><div class="info"><h1 class="title">A Inicialização da Aplicação</h1></div>
        

        <p class="para">
            A classe <span class="classname">Inicialização da Aplicação</span> define quais recursos e
            componentes inicializar. Por padrão, o <a href="zend.controller.front.html" class="link">Controlador
                Frontal</a> do Zend Framework é inicializado, e ele usa o
            <var class="filename">application/controllers/</var> como diretório padrão o qual procura por
            controladores de ação (mais sobre isso mais tarde). A classe parece com o seguinte:
        </p>

        <pre class="programlisting brush: php">
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
}
</pre>


        <p class="para">
            As you can see, not much is necessary to begin with.

            Como você pode ver, não é necessário muito para iniciar.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.configuration"><div class="info"><h1 class="title">Configuração</h1></div>
        

        <p class="para">
            Enquanto o Zend Framework é em si configuração, muitas vezes você precisa configurar
            sua aplicação. A configuração padrão está localizada em
            <var class="filename">application/configs/application.ini</var>, e contém algumas diretrizes
            básicas para configurar seu ambiente <acronym class="acronym">PHP</acronym> (por exemplo, transformar
            relatório de erros dentro e fora), indicando o caminho para sua classe inicialização da
            aplicação (tão bem como sua classe nome), e o caminho para seus controladores de ação.
            Isso parece com o seguinte:
        </p>

        <pre class="programlisting brush: ini">
; application/configs/application.ini

[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH &quot;/../library&quot;
bootstrap.path = APPLICATION_PATH &quot;/Bootstrap.php&quot;
bootstrap.class = &quot;Bootstrap&quot;
appnamespace = &quot;Application&quot;
resources.frontController.controllerDirectory = APPLICATION_PATH &quot;/controllers&quot;
resources.frontController.params.displayExceptions = 0

[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
</pre>


        <p class="para">
            Diversas coisas sobre este arquivo devem ser notadas. Primeiro, quando usar configuração
            de estilo <acronym class="acronym">INI</acronym>, você pode referenciar constantes diretamente e
            expandi-las; <b><tt>APPLICATION_PATH</tt></b> é na verdade uma constante.
            Adicionalmente note que há várias seções definidas: produção, encenação, teste, e
            desenvolvimento. As últimas três herdam configurações do ambiente &quot;produção&quot;. Este é um
            modo eficiente de organizar configurações para assegurar que as configurações
            apropriadas são válidas em cada estágio do desenvolvimento da aplicação.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.action-controllers"><div class="info"><h1 class="title">Action Controllers</h1></div>
        

        <p class="para">
            Your application&#039;s <em class="emphasis">action controllers</em> contain your application
            workflow, and do the work of mapping your requests to the appropriate models and views.
        </p>

        <p class="para">
            An action controller should have one or more methods ending in &quot;Action&quot;; these methods
            may then be requested via the web. By default, Zend Framework URLs follow the schema
            <b><tt>/controller/action</tt></b>, where &quot;controller&quot; maps to the action
            controller name (minus the &quot;Controller&quot; suffix) and &quot;action&quot; maps to an action method
            (minus the &quot;Action&quot; suffix).
        </p>

        <p class="para">
            Typically, you always need an <span class="classname">IndexController</span>, which is a
            fallback controller and which also serves the home page of the site, and an
            <span class="classname">ErrorController</span>, which is used to indicate things such as
            <acronym class="acronym">HTTP</acronym> 404 errors (controller or action not found) and
            <acronym class="acronym">HTTP</acronym> 500 errors (application errors).
        </p>

        <p class="para">
            The default <span class="classname">IndexController</span> is as follows:
        </p>

        <pre class="programlisting brush: php">
// application/controllers/IndexController.php

class IndexController extends Zend_Controller_Action
{

    public function init()
    {
        /* Initialize action controller here */
    }

    public function indexAction()
    {
        // action body
    }
}
</pre>


        <p class="para">
            And the default <span class="classname">ErrorController</span> is as follows:
        </p>

        <pre class="programlisting brush: php">
// application/controllers/ErrorController.php

class ErrorController extends Zend_Controller_Action
{

    public function errorAction()
    {
        $errors = $this-&gt;_getParam(&#039;error_handler&#039;);

        switch ($errors-&gt;type) {
            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_ROUTE:
            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_CONTROLLER:
            case Zend_Controller_Plugin_ErrorHandler::EXCEPTION_NO_ACTION:

                // 404 error -- controller or action not found
                $this-&gt;getResponse()-&gt;setHttpResponseCode(404);
                $this-&gt;view-&gt;message = &#039;Page not found&#039;;
                break;
            default:
                // application error
                $this-&gt;getResponse()-&gt;setHttpResponseCode(500);
                $this-&gt;view-&gt;message = &#039;Application error&#039;;
                break;
        }

        $this-&gt;view-&gt;exception = $errors-&gt;exception;
        $this-&gt;view-&gt;request   = $errors-&gt;request;
    }
}
</pre>


        <p class="para">
            You&#039;ll note that (1) the <span class="classname">IndexController</span> contains no real code,
            and (2) the <span class="classname">ErrorController</span> makes reference to a &quot;view&quot; property.
            That leads nicely into our next subject.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.views"><div class="info"><h1 class="title">Views</h1></div>
        

        <p class="para">
            Views in Zend Framework are written in plain old <acronym class="acronym">PHP</acronym>. View scripts
            are placed in <var class="filename">application/views/scripts/</var>, where they are further
            categorized using the controller names. In our case, we have an
            <span class="classname">IndexController</span> and an <span class="classname">ErrorController</span>,
            and thus we have corresponding <var class="filename">index/</var> and
            <var class="filename">error/</var> subdirectories within our view scripts directory. Within
            these subdirectories, you will then find and create view scripts that correspond to each
            controller action exposed; in the default case, we thus have the view scripts
            <var class="filename">index/index.phtml</var> and <var class="filename">error/error.phtml</var>.
        </p>

        <p class="para">
            View scripts may contain any markup you want, and use the <em class="emphasis">&lt;?php</em>
            opening tag and <em class="emphasis">?&gt;</em> closing tag to insert <acronym class="acronym">PHP</acronym>
            directives.
        </p>

        <p class="para">
            The following is what we install by default for the
            <var class="filename">index/index.phtml</var> view script:
        </p>

        <pre class="programlisting brush: php">
&lt;!-- application/views/scripts/index/index.phtml --&gt;
&lt;style&gt;

    a:link,
    a:visited
    {
        color: #0398CA;
    }

    span#zf-name
    {
        color: #91BE3F;
    }

    div#welcome
    {
        color: #FFFFFF;
        background-image: url(http://framework.zend.com/images/bkg_header.jpg);
        width:  600px;
        height: 400px;
        border: 2px solid #444444;
        overflow: hidden;
        text-align: center;
    }

    div#more-information
    {
        background-image: url(http://framework.zend.com/images/bkg_body-bottom.gif);
        height: 100%;
    }

&lt;/style&gt;
&lt;div id=&quot;welcome&quot;&gt;
    &lt;h1&gt;Welcome to the &lt;span id=&quot;zf-name&quot;&gt;Zend Framework!&lt;/span&gt;&lt;h1 /&gt;
    &lt;h3&gt;This is your project&#039;s main page&lt;h3 /&gt;
    &lt;div id=&quot;more-information&quot;&gt;
        &lt;p&gt;
            &lt;img src=&quot;http://framework.zend.com/images/PoweredBy_ZF_4LightBG.png&quot; /&gt;
        &lt;/p&gt;

        &lt;p&gt;
            Helpful Links: &lt;br /&gt;
            &lt;a href=&quot;http://framework.zend.com/&quot;&gt;Zend Framework Website&lt;/a&gt; |
            &lt;a href=&quot;http://framework.zend.com/manual/en/&quot;&gt;Zend Framework
                Manual&lt;/a&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>


        <p class="para">
            The <var class="filename">error/error.phtml</var> view script is slightly more interesting as
            it uses some <acronym class="acronym">PHP</acronym> conditionals:
        </p>

        <pre class="programlisting brush: php">
&lt;!-- application/views/scripts/error/error.phtml --&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;;
    &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;title&gt;Zend Framework Default Application&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;An error occurred&lt;/h1&gt;
  &lt;h2&gt;&lt;?php echo $this-&gt;message ?&gt;&lt;/h2&gt;

  &lt;?php if (&#039;development&#039; == $this-&gt;env): ?&gt;

  &lt;h3&gt;Exception information:&lt;/h3&gt;
  &lt;p&gt;
      &lt;b&gt;Message:&lt;/b&gt; &lt;?php echo $this-&gt;exception-&gt;getMessage() ?&gt;
  &lt;/p&gt;

  &lt;h3&gt;Stack trace:&lt;/h3&gt;
  &lt;pre&gt;&lt;?php echo $this-&gt;exception-&gt;getTraceAsString() ?&gt;
  &lt;/pre&gt;

  &lt;h3&gt;Request Parameters:&lt;/h3&gt;
  &lt;pre&gt;&lt;?php echo var_export($this-&gt;request-&gt;getParams(), 1) ?&gt;
  &lt;/pre&gt;
  &lt;?php endif ?&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

    </div>

    <div class="section" id="learning.quickstart.create-project.vhost"><div class="info"><h1 class="title">Create a virtual host</h1></div>
        

        <p class="para">
            For purposes of this quick start, we will assume you are using the <a href="http://httpd.apache.org/" class="link external">&raquo; Apache web server</a>. Zend Framework works
            perfectly well with other web servers -- including Microsoft Internet Information
            Server, lighttpd, nginx, and more -- but most developers should be famililar with Apache
            at the minimum, and it provides an easy introduction to Zend Framework&#039;s directory
            structure and rewrite capabilities.
        </p>

        <p class="para">
            To create your vhost, you need to know the location of your
            <var class="filename">httpd.conf</var> file, and potentially where other configuration files
            are located. Some common locations:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                    <var class="filename">/etc/httpd/httpd.conf</var> (Fedora, RHEL, and others)
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <var class="filename">/etc/apache2/httpd.conf</var> (Debian, Ubuntu, and others)
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <var class="filename">/usr/local/zend/etc/httpd.conf</var> (Zend Server on *nix
                    machines)
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <var class="filename">C:\Program Files\Zend\Apache2\conf</var> (Zend Server on Windows
                    machines)
                </p>
            </li>
        </ul>

        <p class="para">
            Within your <var class="filename">httpd.conf</var> (or <var class="filename">httpd-vhosts.conf</var>
            on some systems), you will need to do two things. First, ensure that the
            <var class="varname">NameVirtualHost</var> is defined; typically, you will set it to a value of
            &quot;*:80&quot;. Second, define a virtual host:
        </p>

        <pre class="programlisting brush: apache">
&lt;VirtualHost *:80&gt;
    ServerName quickstart.local
    DocumentRoot /path/to/quickstart/public

    SetEnv APPLICATION_ENV &quot;development&quot;

    &lt;Directory /path/to/quickstart/public&gt;
        DirectoryIndex index.php
        AllowOverride All
        Order allow,deny
        Allow from all
    &lt;/Directory&gt;
&lt;/VirtualHost&gt;
</pre>


        <p class="para">
            There are several things to note. First, note that the <var class="varname">DocumentRoot</var>
            setting specifies the <var class="filename">public</var> subdirectory of our project; this
            means that only files under that directory can ever be served directly by the server.
            Second, note the <var class="varname">AllowOverride</var>, <var class="varname">Order</var>, and
            <var class="varname">Allow</var> directives; these are to allow us to use
            <var class="filename">htacess</var> files within our project. During development, this is a
            good practice, as it prevents the need to constantly restart the web server as you make
            changes to your site directives; however, in production, you should likely push the
            content of your <var class="filename">htaccess</var> file into your server configuration and
            disable this. Third, note the <var class="varname">SetEnv</var> directive. What we are doing
            here is setting an environment variable for your virtual host; this variable will be
            picked up in the <var class="filename">index.php</var> and used to set the
            <b><tt>APPLICATION_ENV</tt></b> constant for our Zend Framework application. In
            production, you can omit this directive (in which case it will default to the value
            &quot;production&quot;) or set it explicitly to &quot;production&quot;.
        </p>

        <p class="para">
            Finally, you will need to add an entry in your <var class="filename">hosts</var> file
            corresponding to the value you place in your <var class="varname">ServerName</var> directive. On
            *nix-like systems, this is usually <var class="filename">/etc/hosts</var>; on Windows, you&#039;ll
            typically find it in <var class="filename">C:\WINDOWS\system32\drivers\etc</var>. Regardless of
            the system, the entry will look like the following:
        </p>

        <pre class="programlisting brush: text">
127.0.0.1 quickstart.local
</pre>


        <p class="para">
            Start your webserver (or restart it), and you should be ready to go.
        </p>
    </div>

    <div class="section" id="learning.quickstart.create-project.checkpoint"><div class="info"><h1 class="title">Checkpoint</h1></div>
        

        <p class="para">
            At this point, you should be able to fire up your initial Zend Framework application.
            Point your browser to the server name you configured in the previous section; you should
            be able to see a welcome page at this point.
        </p>
    </div>
</div>
        <hr />

            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="learning.quickstart.intro.html">Introdu&ccedil;&atilde;o ao Zend Framework e ao MVC</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="learning.quickstart.html">Guia R&aacute;pido do Zend Framework</a></span><br />
                        <span class="home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="learning.quickstart.create-layout.html">Create A Layout</a></div>
                    </td>
                </tr>
            </table>
</td>
        <td style="font-size: smaller;" width="15%"> <style type="text/css">
#leftbar {
	float: left;
	width: 186px;
	padding: 5px;
	font-size: smaller;
}
ul.toc {
	margin: 0px 5px 5px 5px;
	padding: 0px;
}
ul.toc li {
	font-size: 85%;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: center left;
}
ul.toc li.header {
	font-size: 115%;
	padding: 5px 0px 5px 11px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 5px;
}
ul.toc li.active {
	font-weight: bold;
}
ul.toc li a {
	text-decoration: none;
}
ul.toc li a:hover {
	text-decoration: underline;
}
</style>
 <ul class="toc">
  <li class="header home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></li>
  <li class="header up"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></li>
  <li class="header up"><a href="learning.html">Conhecendo o Zend Framework</a></li>
  <li class="header up"><a href="learning.quickstart.html">Guia R&aacute;pido do Zend Framework</a></li>
  <li><a href="learning.quickstart.intro.html">Introdu&ccedil;&atilde;o ao Zend Framework e ao MVC</a></li>
  <li class="active"><a href="learning.quickstart.create-project.html">Crie Seu Projeto</a></li>
  <li><a href="learning.quickstart.create-layout.html">Create A Layout</a></li>
  <li><a href="learning.quickstart.create-model.html">Create a Model and Database Table</a></li>
  <li><a href="learning.quickstart.create-form.html">Create A Form</a></li>
  <li><a href="learning.quickstart.conclusion.html">Congratulations!</a></li>
 </ul>
 </td>
    </tr>
</table>

<script type="text/javascript" src="../js/shCore.js"></script>
<script type="text/javascript" src="../js/shAutoloader.js"></script>
<script type="text/javascript" src="../js/main.js"></script>

</body>
</html>